<template>
  <a>
    <a-input placeholder="请输入项目地址、客户名称、贷款顾问" style="width:300px" v-model="keyWord" />
    <a-button style="margin-left:20px;" type="primary" @click="submit()">查询</a-button>
    <a-modal v-model="dialog" @ok="onOK" :width="1000">
      <a-table rowKey="id" :columns="columns" :data-source="data" :pagination="pagination" class="mt-4">
        <span slot="applyDate" slot-scope="applyDate"> {{ humanizeDate(applyDate) }}</span>
        <span slot="stage" slot-scope="stage, record">
          <a-select v-model="record.to" style="width:120px">
            <a-select-option :value="item.name" v-for="(item, index) in getProgress(stage)" :key="index">
              {{ item.value }}
            </a-select-option>
          </a-select>
        </span>
        <span slot="projectStage" slot-scope="_, record">
          <state :record="record"></state>
        </span>
        <span slot="opr" slot-scope="_, record">
          <a @click="toDetail(record)">查看</a>
        </span>
      </a-table>
    </a-modal>
  </a>
</template>
<script>
import { getsearch } from '@/api/common'
import moment from 'moment'
export default {
  name: 'headerSeach',
  components: {},
  props: [''],
  data() {
    return {
      dialog: false,
      keyWord: '',
      columns: [
        { dataIndex: 'projectNum', key: 'projectNum', title: '项目编号' },
        { dataIndex: 'addr', key: 'addr', title: '项目地址', width: 90 },
        { dataIndex: 'clientName', key: 'clientName', title: '客户名称' },
        { dataIndex: 'sysUserName', key: 'sysUserName', title: '贷款顾问' },
        { dataIndex: 'applyDate', key: 'applyDate', title: '申请日期', scopedSlots: { customRender: 'applyDate' } },
        { dataIndex: 'stage', key: 'stage', title: '所处模块', scopedSlots: { customRender: 'stage' } },
        {
          dataIndex: 'projectStage',
          key: 'projectStage',
          title: '项目状态',
          scopedSlots: { customRender: 'projectStage' }
        },
        { dataIndex: 'opr', key: 'opr', title: '操作', scopedSlots: { customRender: 'opr' } }
      ],
      data: [],
      progress: [
        { value: '商机', name: 'business/detail' },
        { value: '项目评估', name: 'evaluation/brief' },
        { value: '项目完成协议', name: 'operation' },
        { value: '资金管理', name: 'manage/detail' },
        { value: '项目违约', name: 'calcOperation' }
      ],
      stages: [],
      pagination: {
        total: 1,
        pageSize: 10,
        onChange: this.submit
      }
    }
  },
  watch: {},
  components: {
    state: () => import('./listStatus.vue')
  },
  methods: {
    getProgress(stage) {
      return this.progress.slice(0, stage)
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    toDetail(record) {
      const name = record.to
      if (name == 'manage/detail') {
        this.$router.push({ name: name, query: { id: record.id, addr: record.addr } })
      } else {
        this.$router.push({ name: name, query: { id: record.id } })
      }
      this.dialog = false
    },
    async submit(page = 1) {
      const _form = {
        page,
        limit: this.pagination.pageSize,
        keyWord: this.keyWord
      }
      const res = await getsearch(_form)
      const data = res.result.data
      this.pagination.total = data.total
      const list = data?.list || []
      this.data = list.map(el => ({
        ...el,
        to: 'business/detail'
      }))
      this.dialog = true
    },
    onOK() {
      this.dialog = true
    }
  }
}
</script>
<style lang="css" scoped></style>
